<template>
  <div style="width: 100%; overflow: auto">
    <div class="table-default pmc-table" style="width: 100%; border: 1px solid #eee; overflow: auto; padding: 5px">
      <!-- 1. 今日生产计划 -->
      <div class="table-item" style="position: relative">
        <el-select
          v-model="back_statutodayproduction"
          class="m-2"
          placeholder="筛选计划配置状态"
          clearable
          size="small"
          @change="changeback_statutodayproduction"
          style="position: absolute; top: 0; right: 0; z-index: 99; box-shadow: 3px 3px 3px #f2f9fe"
        >
          <el-option v-for="item in plantypeArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <p class="tabl-title">今 日 生 产 情 况</p>
        <el-table :data="todayproductionList" class="mt-3" v-loading="loadingproductionList" style="width: 100%; height: 85%; font-size: 12px; padding-top: 0" border>
          <el-table-column label="生产用料清单" prop="fbillno" width="130" />
          <el-table-column label="产品SKU" prop="fmaterialid" width="100" />
          <el-table-column label="产品名称" prop="fmaterialname" width="120" />
          <el-table-column label="生产车间" prop="fworkshopid_name" width="110" />
          <el-table-column label="生产线" prop="fline" width="80" />
          <el-table-column label="计划配置" prop="plantype" width="100" />
          <el-table-column label="备料套数" prop="back_number" width="80">
            <template #default="scope">
              <span v-if="Number(scope.row.back_number) != 0"> {{ Number(scope.row.back_number) }}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="计划数量" prop="fqty" width="80">
            <template #default="scope">
              <span v-if="Number(scope.row.fqty) != 0"> {{ Number(scope.row.fqty) }}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="汇报数量" prop="report_qty" width="80">
            <template #default="scope">
              <span v-if="Number(scope.row.report_qty) != 0"> {{ Number(scope.row.report_qty) }}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="入库数量" prop="inbound_qty" width="80">
            <template #default="scope">
              <span v-if="Number(scope.row.inbound_qty) != 0"> {{ Number(scope.row.inbound_qty) }}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="完成率" prop="rateof" width="80" />
          <el-table-column label="实际总工时" prop="total_hours" width="90" />
          <el-table-column label="计划内时间" prop="plannedtime" width="130" />
          <el-table-column label="计划外时间" prop="unscheduledtime" width="130" />
        </el-table>
      </div>
      <!-- 2. 本周生产计划 -->
      <div class="table-item" style="position: relative">
        <el-select
          v-model="back_statutheweekplan"
          class="m-2"
          placeholder="筛选计划配置状态"
          clearable
          size="small"
          @change="changeback_statutheweekplan"
          style="position: absolute; top: 0; right: 0; z-index: 99; box-shadow: 3px 3px 3px #f2f9fe"
        >
          <el-option v-for="item in plantypeArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <p class="tabl-title" style="height: 1.5rem; line-height: 1.5rem">本 周 生 产 计 划</p>
        <el-button class="moreBtn" size="small" type="primary" @click="moreHandler('theweekplan')">查看更多</el-button>
        <el-table :data="theweekplanList" class="mt-3" v-loading="loadingtheweekplan" style="width: 100%; height: 75%; font-size: 12px; padding-top: 0" border>
          <el-table-column label="生产用料清单" prop="fbillno" width="130" />
          <el-table-column label="产品SKU" prop="fmaterialid" width="100" />
          <el-table-column label="产品名称" prop="fmaterialname" width="120" />
          <el-table-column label="生产车间" prop="fworkshopid_name" width="110" />
          <el-table-column label="生产线" prop="fline" width="120" />
          <el-table-column label="备料套数" prop="back_number" width="90">
            <template #default="scope">
              <span> {{ Number(scope.row.back_number) }}</span>
              <!-- <span v-if="Number(scope.row.back_number) !=0 "> {{ Number(scope.row.back_number) }}</span>
          <span></span> -->
            </template>
          </el-table-column>
          <el-table-column label="计划配置" prop="plantype" width="80" />
          <el-table-column label="计划生产日期" prop="fplannedstarttime" width="120" />
          <el-table-column label="计划生产数量" prop="planqty" width="100" />
          <el-table-column label="计划人工" prop="plan_labor" width="80" />
          <el-table-column label="计划生产时长" prop="production_time" width="100" />
          <el-table-column label="计划总工时" prop="plan_total" width="100" />
          <el-table-column label="备注" prop="remark" width="130" />
          <el-table-column label="创建人" prop="creator_id" width="100" />
        </el-table>
        <div class="pager">
          <el-pagination layout="prev, pager, next" small :total="pagestheweekplan.total" :current-page="pagestheweekplan.page" @current-change="changetheweekplan" />
        </div>
      </div>
      <!-- 3. 待备货 -->
      <div class="table-item" style="position: relative">
        <el-select
          v-model="back_status"
          class="m-2"
          placeholder="筛选计划配置状态"
          clearable
          size="small"
          @change="changeback_status"
          style="position: absolute; top: 0; right: 0; z-index: 99; box-shadow: 3px 3px 3px #f2f9fe"
        >
          <el-option v-for="item in plantypeArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <p class="tabl-title" style="height: 1.5rem; line-height: 1.5rem">待 备 货</p>
        <el-table :data="goodstockList" class="mt-3" v-loading="loadinggoodstock" style="width: 100%; height: 75%; font-size: 12px; padding-top: 0" border>
          <el-table-column label="生产用料清单" prop="fbillno" width="130" />
          <el-table-column label="产品名称" prop="fmaterialname" width="100" />
          <el-table-column label="产品SKU" prop="fmaterialid1" width="100" />
          <el-table-column label="物料名称" prop="fmaterialname1" width="200" />
          <el-table-column label="计划配置" prop="plantype" width="80" />
          <el-table-column label="订单状态" prop="fmoentrystatus" width="80">
            <template #default="scope">
              {{ scope.row.fmoentrystatus }}
              <!-- <el-tag class="ml-2" type="warning" v-if="scope.row.fmoentrystatus == '0'">{{ statusformatter[Number(scope.row.fmoentrystatus)] }}</el-tag>
                <el-tag class="ml-2" type="success" v-if="scope.row.fmoentrystatus == '1'">{{ statusformatter[Number(scope.row.fmoentrystatus)] }}</el-tag>
                <el-tag class="ml-2" type="danger" v-if="scope.row.fmoentrystatus == '2'">{{ statusformatter[Number(scope.row.fmoentrystatus)] }}</el-tag> -->
            </template>
          </el-table-column>
          <el-table-column label="需求数量" prop="fmustqty" width="80">
            <template #default="scope">
              <span v-if="Number(scope.row.fmustqty) != 0"> {{ Number(scope.row.fmustqty) }}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="已领数量" prop="fpickedqty" width="80">
            <template #default="scope">
              <span v-if="Number(scope.row.fpickedqty) != 0"> {{ Number(scope.row.fpickedqty) }}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="未提交数量" prop="fnopickedqty" width="90">
            <template #default="scope">
              <span v-if="Number(scope.row.fnopickedqty) != 0"> {{ Number(scope.row.fnopickedqty) }}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="审核时间" prop="examine_time" width="150" />
          <el-table-column label="指派人" prop="user_name	" width="80" />
        </el-table>
        <div class="pager">
          <el-pagination layout="prev, pager, next" small :total="pagesgoodstock.total" :current-page="pagesgoodstock.page" @current-change="changegoodstock" />
        </div>
      </div>

      <div class="table-item table-item-fa">
        <!-- 左. 今日接单情况 -->
        <div class="table-item-item">
          <p class="tabl-title">今 日 接 单 情 况</p>
          <div class="theweekTable">
            <table cellpadding="2" style="margin: 0.7rem auto 0; width: 95%; font-size: 12px; border: 1px solid #000">
              <tr>
                <td>日期 :</td>
                <td>{{ orderstodayreceivedHeard.FDate }}</td>
                <td>待审单量 :</td>
                <td>{{ orderstodayreceivedHeard.OrderTaking_reviewed }}</td>
                <td>接单量 ：</td>
                <td>{{ orderstodayreceivedHeard.OrderTaking }}</td>
              </tr>
              <tr>
                <td>接单sku数量 ：</td>
                <td>{{ orderstodayreceivedHeard.OrderSku }}</td>
                <td>sku数量 :</td>
                <td>{{ orderstodayreceivedHeard.OrderSku_reviewed }}</td>
                <td></td>
                <td></td>
              </tr>
            </table>
          </div>
          <el-table :data="orderstodayreceivedList" class="mt-3" style="width: 100%; height: 60%; font-size: 12px" border>
            <el-table-column label="销售订单号" prop="FBillNo" width="120" />
            <el-table-column label="产品SKU" prop="FMaterialId.FNUMBER" width="120" />
            <el-table-column label="产品名称" prop="FMaterialId.FNAME" min-width="200" />
            <el-table-column label="订单数量" prop="FQty" width="90" />
            <el-table-column label="审核状态" prop="writestate" width="100">
              <template #default="scope">
                {{ scope.row.FDocumentStatus }}
                <!-- <el-tag class="ml-2" type="warning" v-if="scope.row.writestate == '0'">{{ statusformatter[Number(scope.row.writestate)] }}</el-tag>
                <el-tag class="ml-2" type="success" v-if="scope.row.writestate == '1'">{{ statusformatter[Number(scope.row.writestate)] }}</el-tag>
                <el-tag class="ml-2" type="danger" v-if="scope.row.writestate == '2'">{{ statusformatter[Number(scope.row.writestate)] }}</el-tag> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 右. 今日发货情况 -->
        <div class="table-item-item">
          <p class="tabl-title">今 日 发 货 情 况</p>
          <div class="theweekTable">
            <table cellpadding="2" style="margin: 0.7rem auto 0; width: 95%; font-size: 12px; border: 1px solid #000">
              <tr>
                <td>日期 :</td>
                <td>{{ orderstodaylistHeard.created_at }}</td>
                <td>完成出库单量 ：</td>
                <td>{{ orderstodaylistHeard.complete_order }}</td>
                <td>完成出库数量 ：</td>
                <td>{{ orderstodaylistHeard.complete_quantity }}</td>
              </tr>
              <tr>
                <td>待出库单量 :</td>
                <td>{{ orderstodaylistHeard.released_order }}</td>
                <td>待出库数量 :</td>
                <td>{{ orderstodaylistHeard.released_quantity }}</td>
                <td>其他出库待审单量 :</td>
                <td>{{ orderstodaylistHeard.other_quantity }}</td>
              </tr>
            </table>
          </div>

          <el-table :data="orderstodaylist" class="mt-3" style="width: 100%; height: 60%; font-size: 12px; margin-top: 0.5rem" border>
            <el-table-column label="销售单号" prop="fbillno" width="130" />
            <el-table-column label="产品SKU" prop="fmaterialid" width="130" />
            <el-table-column label="产品名称" prop="fmaterialname" min-width="200" />
            <el-table-column label="出库状态" prop="writestate" width="80">
              <template #default="scope">
                {{ scope.row.writestate }}
                <!-- <el-tag class="ml-2" type="warning" v-if="scope.row.writestate == '0'">{{ statusformatter[Number(scope.row.writestate)] }}</el-tag>
                <el-tag class="ml-2" type="success" v-if="scope.row.writestate == '1'">{{ statusformatter[Number(scope.row.writestate)] }}</el-tag>
                <el-tag class="ml-2" type="danger" v-if="scope.row.writestate == '2'">{{ statusformatter[Number(scope.row.writestate)] }}</el-tag> -->
              </template>
            </el-table-column>
            <el-table-column label="计划出库数量" prop="fqty" width="100">
              <template #default="scope">
                <span v-if="Number(scope.row.fqty) != 0"> {{ Number(scope.row.fqty) }}</span>
                <span v-else></span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import http from '/admin/support/http'
import { ElMessage } from 'element-plus'
import { setTableHeight } from '/admin/utils/setHeight.js'
import { useRouter } from 'vue-router'
let router = useRouter()

const currentDate = new Date()
const year = currentDate.getFullYear()
const month = currentDate.getMonth() + 1
const day = currentDate.getDate()

const formattedDate = `${year}-${month}-${day}`
// const formattedDate = '2023-07-29'

console.log('当前日期', formattedDate)

// 定义数组
let todayproductionList = ref([]) //今日生产
let theweekplanList = ref([]) //本周生产计划
let orderstodaylist = ref([]) //今日发货
let orderstodaylistHeard = ref({}) //今日发货头部
let orderstodayreceivedHeard = ref({}) //今日接单头部
let orderstodayreceivedList = ref([]) //今日接单
let goodstockList = ref([]) //待备货
let back_status = ref(null)
let back_statutheweekplan = ref(null)
let back_statutodayproduction = ref(null)

// 定义分页
let pagestodayproduction = reactive({
  total: 0,
  page: 1,
  limit: 10,
})
let pagestheweekplan = reactive({
  total: 0,
  page: 1,
  limit: 10,
})
let pagesgoodstock = reactive({
  total: 0,
  page: 1,
  limit: 10,
})
let pagesorderstodaylist = reactive({
  total: 0,
  page: 1,
  limit: 10,
})
let pagesorderstodayreceived = reactive({
  total: 0,
  page: 1,
  limit: 10,
})

let loadinggoodstock = ref(false)
let loadingtheweekplan = ref(false)
let loadingproductionList = ref(false)

// 分页改变 今日生产情况
const changegoodstock = val => {
  console.log('触发未领料分页,页数val:', val)
  pagesgoodstock.page = val
  getgoodstock()
}
// 分页改变 本周生产计划
const changetheweekplan = val => {
  console.log('触发未领料分页,页数val:', val)
  pagestheweekplan.page = val
  gettheweekplan()
}
//  本周生产计划 状态改变
const changeback_statutheweekplan = val => {
  gettheweekplan()
}
//  今日生产计划 状态改变
const changeback_statutodayproduction = val => {
  gettodayproduction()
}

const changeback_status = val => {
  console.log('选中的备货状态', val)
  getgoodstock()
}

const gettodayproduction = () => {
  // 今日生产
  loadingproductionList.value = true
  let AllSend = {
    plantype: back_statutodayproduction.value,
    // created_at: null,
    created_at: formattedDate,
    // limit: pagestodayproduction.limit,
    // page: pagestodayproduction.page,
  }
  http
    .get('/pmcsignage/todayproduction', AllSend)
    .then(r => {
      loadingproductionList.value = false
      console.log('今日生产列表', r.data)
      if (r.data.code == 10000) {
        todayproductionList.value = r.data.data
        pagestodayproduction.total = r.data.total
      } else {
        ElMessage.error(r.data.message)
      }
    })
    .catch(() => {
      loadingproductionList.value = false
    })
}
const gettheweekplan = () => {
  // 本周生产计划
  let AllSend = {
    // theweek: formattedDate,
    theweek: 'curWeek',
    plantype: back_statutheweekplan.value,
    limit: pagestheweekplan.limit,
    page: pagestheweekplan.page,
  }
  loadingtheweekplan.value = true

  http
    .get('/pmcsignage/theweekplan', AllSend)
    .then(r => {
      console.log('本周生产计划列表', r.data)
      loadingtheweekplan.value = false
      if (r.data.code == 10000) {
        theweekplanList.value = r.data.data
        pagestheweekplan.total = r.data.total
      } else {
        ElMessage.error(r.data.message)
      }
    })
    .catch(() => {
      loadingtheweekplan.value = false
    })
}

const getgoodstock = () => {
  // 待备货
  let AllSend = {
    back_status: 0,
    plantype: back_status.value,
    limit: pagesgoodstock.limit,
    page: pagesgoodstock.page,
  }
  loadinggoodstock.value = true
  http
    .get('/pmcsignage/goodstock', AllSend)
    .then(r => {
      console.log('待备货列表', r.data)
      loadinggoodstock.value = false
      if (r.data.code == 10000) {
        goodstockList.value = r.data.data
        pagesgoodstock.total = r.data.total
      } else {
        ElMessage.error(r.data.message)
      }
    })
    .catch(error => {
      loadinggoodstock.value = false
    })
}

const getBackReport = () => {
  // 今日发货
  let AllSend = {
    FDate: formattedDate,
    limit: 1000,
    page: 1,
    // FDate: '2023-10-9',
    // limit: pagesorderstodaylist.limit,
    // page: pagesorderstodaylist.page,
  }
  http.get('/pmcsignage/orderstodaylist', AllSend).then(r => {
    console.log('今日发货列表', r.data)
    if (r.data.code == 10000) {
      orderstodaylistHeard.value = r.data.data.head
      orderstodaylist.value = r.data.data.data.data
      pagesorderstodaylist.total = r.data.data.data.total
      // console.log( orderstodaylist.value);
    } else {
      ElMessage.error(r.data.message)
    }
  })
}
const getorderstodayreceived = () => {
  // 今日接单
  let AllSend = {
    FDate: formattedDate,
    // FDate: '2023-10-10',
    limit: 1000,
    page: 1,
    // limit: pagesorderstodayreceived.limit,
    // page: pagesorderstodayreceived.page,
  }
  http.get('/pmcsignage/orderstodayreceived', AllSend).then(r => {
    console.log('今日接单列表', r.data)
    if (r.data.code == 10000) {
      orderstodayreceivedHeard.value = r.data.data.head
      console.log(orderstodayreceivedHeard.value)

      orderstodayreceivedList.value = r.data.data.data.data
      pagesorderstodayreceived.total = r.data.data.total
    } else {
      ElMessage.error(r.data.message)
    }
  })
}
let plantypeArr = ref([])
let plantypeObj = reactive({})
const getplantype = () => {
  // 类型配置
  http.get('/pmcsignage/plantype').then(r => {
    console.log('类型配置', r.data)
    if (r.data.code == 10000) {
      plantypeArr.value = r.data.data
      // plantypeArr.value.push({ label: '全部', value: '' })
      plantypeObj = r.data.data.reduce((prev, item) => {
        prev[item.value] = item.label
        return prev
      }, {})
      console.log(plantypeArr.value, plantypeObj)
    } else {
      ElMessage.error(r.data.message)
    }
  })
}

onMounted(() => {
  setTableHeight('.table-default')
  getplantype() //类型配置
  gettodayproduction()
  getgoodstock() //待备货
  getBackReport()
  gettheweekplan() //本周生产计划
  getorderstodayreceived()
})

const moreHandler = param => {
  if (param == 'theweekplan') {
    router.push('/pmcsignage/theweekplan')
  }
}
</script>

<style lang="css">
.table-item-item .theweekTable {
  /* transform: scale(0.9);
  transform-origin: center left; */
  /* width: 90%; */
}
.table-item-item .theweekTable td {
  border: 1px solid #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-item {
  padding-top: 0;
  width: 100%;
  height: 40%;
  border: 1px solid #409eff;
  border-radius: 5px;
  margin-bottom: 5px;
  /* overflow: auto; */
}
.tabl-title {
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: #409eff;
  background-color: #f2f9fe;
  border-radius: 10px;
  transform: translateY(0.5rem);
}
.moreBtn {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 99;
}
.table-item-fa {
  display: flex;
  justify-content: space-between;
}

.table-item-item {
  width: 49.5%;
  height: 100%;
  border: 1px solid #409eff;
  border-radius: 5px;
}

.pmc-table .el-table .el-table__cell {
  padding: 0 !important;
}

.pmc-table .el-table__header {
  height: 1.5rem !important;
}
.pmc-table .el-table__header .cell {
  color: #666;
}
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: none;
}
</style>
